<template>
  <div class="home">
    <Header></Header>
    <TodoList p-tit="正在进行" :p-data="$store.getters.complate"></TodoList>
    <TodoList p-tit="已经完成" :p-data="$store.getters.uncomplate"></TodoList>
  </div>
</template>

<script>
import Header from "../components/Header";
import TodoList from "../components/TodoList";
export default {
  name: "Home",
  components: {
    Header,
    TodoList,
  },
  computed: {
    list: {
      get() {
        return this.$store.state.list;
      },
      set() {},
    },
  },
  mounted() {
    if (localStorage.getItem("todo")) {
      let a = JSON.parse(localStorage.getItem("todo"));
      this.$store.commit("inits", a);
    }
  },
  watch: {
    list: {
      handler(val, oldVal) {
        localStorage.setItem("todo", JSON.stringify(val));
      },
      deep: true,
    },
  },
};
</script>
